<template>
    <div>
    	<div style="margin: 10px;text-align: center;">
      		<input type="file" @change="uploadExcel" /> <!--导入-->
      		<button @click="downloadExcel" style="margin: 0 20px">导出</button>
    	</div>
      	<div id="luckysheet"></div>
    </div>
</template>

<script>
	import LuckyExcel from "luckyexcel";
	import { exportExcel } from "@/utils/export"; /*导出*/
    export default {
        name: 'ExcelEdit',
        props: {
            msg: String
        },
        data() {
            return {
            	options: {
			        container: "luckysheet",
			        title: "exceledit", //表 头名
			        lang: "zh", //中文
			        showtoolbar: true, //是否显示工具栏
			        showinfobar: false, //是否显示顶部信息栏
			        showsheetbar: true, //是否显示底部sheet按钮
			        myFolderUrl: "/",//作用：左上角<返回按钮的链接
			        /*column: 30,
                    row:24,
			        allowEdit:true,//是否允许前端编辑
                    cellRightClickConfig:{//自定义配置单元右键菜单
                        copy: true, // 复制
                        copyAs: true, // 复制为
                        paste: true, // 粘贴
                        insertRow: true, // 插入行
                        insertColumn: true, // 插入列
                        deleteRow: true, // 删除选中行的数据 
                        deleteColumn: true, // 删除选中列的数据
                        deleteCell: true, 
                        hideRow: true,
                        hideColumn: true, 
                        rowHeight: true, // 设置行高
                        columnWidth: true, // 设置行宽
                        clear: true, // 清空选定内容
                        matrix: false, //矩阵 
                        sort: false, // 排序
                        filter: false, //筛选 
                        chart: false, //图表生成
                        image: false, //插入图片
                        link: false, // 插入连接，比如网址之类
                        data: false, //数据校验
                        cellFormat: false //设置单元格格式，锁定单元格格式，隐藏公示等
                    },*/
			    },
            }
        },
        mounted() {
           $(() => {luckysheet.create(this.options);}); /*渲染*/
        },
        methods:{
            // 本地上传
		    uploadExcel(evt) {
		      const files = evt.target.files;
		      if (files == null || files.length == 0) {
		        alert("No files wait for import");
		        return;
		      }
		      let name = files[0].name;
		      let suffixArr = name.split("."),
		        suffix = suffixArr[suffixArr.length - 1];
		      if (suffix != "xlsx") {
		        alert("Currently only supports the import of xlsx files");
		        return;
		      }
		      LuckyExcel.transformExcelToLucky(
		        files[0],
		        (exportJson, luckysheetfile) => {
		          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
		            alert(
		              "Failed to read the content of the excel file, currently does not support xls files!"
		            );
		            return;
		          }
		          window.luckysheet.destroy();
		          this.options.data = exportJson.sheets;
		          window.luckysheet.create(this.options);
		        }
		      );
		    },
		    // 导出到本地
		    downloadExcel() {
		      exportExcel(luckysheet.getAllSheets(), "test");
		    },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#luckysheet{
		margin:0px;
		padding:0px;
		position:absolute;
		width:100%;
		height:100%;
		left: 0px;
	}

</style>

